<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<title></title>
	</head>
	<body>
		<nav>
			<div class="nav1">
				<h1>翻译</h1>
				<h3>中英互译</h3>
			</div>

		</nav>
		<div class="main">
			<div class="consin">
				<div class="main-1">
					<div id="btn_if">
						<button class="b1" type="button">中文</button>
						<button type="button">英文</button>
					</div>
					
						<button onclick="lan()" class="a1" id="btn_swap" type="button">
							<->
						</button>
					
					<div id="btn_that">
						<button class="b1" type="button">英文</button>
						<button type="button">中文</button>
					</div>

				</div>
				<div class="main-2">
					<input placeholder="输入文字" type="text" id="text_if" />
					<input class="i1" readonly="readonly" placeholder="翻译" type="text" id="text_that" />
				</div>
				<div class="main-3">
					<button id="btn_res" onclick="res()" type="button">翻译</button>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			//中文
			//var data_zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
			//英语
			//var data_en = ['do you know', 'June', 'One day', 'Monday', 'Yes', 'Children\'s day'];
			//中文转英文的函数
			//function  zhToEn(){}
			//英文转中文的函数
			//function  enToZh(){}
			//点击翻译-切换翻译语言的函数
			//function switchLan(){}



			//中文转英文的函数

			// var data_zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
			// function  zhToEn(){
			// 	var text = document.querySelector("#shuru").value;
			// 	if(text == "你知道吗"){
			// 		document.querySelector("#shuchu").value = 'do you know';
			// 	}if(text == "六月"){
			// 		document.querySelector("#shuchu").value = 'June';
			// 	}if(text == "一日"){
			// 		document.querySelector("#shuchu").value = 'One day';
			// 	}if(text == "星期一"){
			// 		document.querySelector("#shuchu").value = 'Monday';
			// 	}if(text == "是"){
			// 		document.querySelector("#shuchu").value = 'Yes';
			// 	}if(text == "儿童节"){
			// 		document.querySelector("#shuchu").value = 'Children\'s day';
			// 	}
			// }

			//英文转中文的函数
			// function  enToZh(){
			// 	var text1 = document.querySelector("#shuru").value;
			// 	if(text1 == "do you know"){
			// 		document.querySelector("#shuchu").value = '你知道吗';
			// 	}if(text1 == "June"){
			// 		document.querySelector("#shuchu").value = '六月';
			// 	}if(text1 == "One day"){
			// 		document.querySelector("#shuchu").value = '一日';
			// 	}if(text1 == "Monday"){
			// 		document.querySelector("#shuchu").value = '星期一';
			// 	}if(text1 == "Yes"){
			// 		document.querySelector("#shuchu").value = '是';
			// 	}if(text1 == "Children\'s day"){
			// 		document.querySelector("#shuchu").value = '儿童节';
			// 	}
			// }

			// 
			// var zh = true;
			// function switchLan(){
			// 	var btn = document.querySelectorAll("button")
			// 	if(zh){
			// 		btn[0].classList.remove('b1');
			// 		btn[1].classList.add('b1');
			// 	}else{
			// 		btn[0].classList.add('b1');
			// 		btn[1].classList.remove('b1');
			// 	}
			// }


			//中文
			var data_zh = ['你知道吗', '六月', '一日', '星期一', '是', '儿童节'];
			//英语
			var data_en = ['do you know', 'June', 'One day', 'Monday', 'Yes', 'Children\'s day'];



			//左侧的语言显示
			var btn_if = document.querySelectorAll("#btn_if button");
			//右侧的语言显示
			var btn_that = document.querySelectorAll("#btn_that button");
			//点击切换语言
			var btn_swap = document.querySelector("#btn_swap");
			//左侧的输入内容
			var text_if = document.querySelector("#text_if");
			//右侧的翻译结果
			var text_that = document.querySelector("#text_that");
			//翻译按钮
			var btn_res = document.querySelector("#btn_res");
			//默认语言是中文
			var lang = 'zh';

			//切换语言
			function lan() {
				//切换默认语言用的
				if (lang == 'zh') {
					lang = 'en';
				} else {
					lang = 'zh'
				}
				for (var i = 0; i < btn_if.length; i++) {
					btn_if[i].classList.remove('b1');
					btn_that[i].classList.remove('b1');
				}
				switch (lang) {
					case 'zh':
						btn_if[0].classList.add('b1');
						btn_that[0].classList.add('b1');
						break;
					case 'en':
						btn_if[1].classList.add('b1');
						btn_that[1].classList.add('b1');
						break;
				}
			}
			
			
			
			//点击翻译按钮的方法
			function res(){
				//数据
				var data;
				//监测数据库里面有没有这个词汇
				var if_text = false;
				
				//看看中文词库里面有没有这个词语
				for(var i in data_zh){
					if(text_if.value == data_zh[i]){
						if_text = true;
						data = data_zh;
						text_that.value = data_en[i];
						
						if(lang == 'en'){
							lan();
						}
					}
				}
				//看看英文词库里面有没有这个词语
				for(var i in data_en){
					if(text_if.value == data_en[i]){
						if_text = true;
						data = data_en;
						text_that.value = data_zh[i];
						
						if(lang == 'zh'){
							lan();
						}
					}
				}
				if(!if_text){
					text_that.value = '';
					alert("无法翻译")
				}
			}
		</script>
	</body>
</html>
